import QtQuick 2.0

MouseArea {
    id: m_root
    width: 10;
    height: 10;

    property alias text: m_label.text
    property alias font: m_label.font
    property real density: 1.0

    signal signalPressKey(int key)

    //这个Rectangle作为背景
    Rectangle {
        id: m_background
        anchors.fill: parent
        border.color: "#2855a8"
        border.width: 2
        radius: parent.height * 0.1
        smooth: true
        //渐变效果
        gradient: Gradient{
            GradientStop {id: m_gradBg1;  position: 0.0;  color: "#3C3B46"}
            GradientStop {id: m_gradBg2;  position: 0.5;  color: "#3C3B46"}
            GradientStop {id: m_gradBg3;  position: 1.0;  color: "#3C3B46"}
        }
    }

    Rectangle {
        height: parent.height / 2
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 1
        radius: m_background.radius
        gradient: Gradient {
            GradientStop {id:m_grad1;  position: 0.0;  color: "#66FFFFFF";}
            GradientStop {id:m_grad2;  position: 1.0;  color: "#11FFFFFF";}
        }
        smooth: true
    }

    //按钮文字
    LQBaseText {
        id: m_label
        anchors.centerIn: parent
        text: "button";
        color: "white"
        font.bold: true
        font.pixelSize: 12 * density
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }

    //按钮处理
    Keys.onPressed: {
        signalPressKey(event.key)
    }

    //当按钮状态改变时，改变对应的属性
    states: [
        State {
            name: "pressed"
            when: m_root.pressed
            PropertyChanges { target: m_gradBg1; color:"#50C7A7" }
            PropertyChanges { target: m_gradBg2; color:"#50C7A7" }
            PropertyChanges { target: m_gradBg3; color:"#50C7A7" }
            PropertyChanges { target: m_label; anchors.leftMargin: 3 }
            PropertyChanges { target: m_label; anchors.topMargin: 3 }
        },
        State {
            name: "forcus"
            when: m_root.focus
            PropertyChanges { target: m_gradBg1; color: "#50C7A7" }
            PropertyChanges { target: m_gradBg2; color: "#50C7A7" }
            PropertyChanges { target: m_gradBg3; color: "#50C7A7" }
        }
    ]
}
